<template>
    <transition name="fade">
        <div class="user-center">
            <div class="header">
                <div class="back" @click.stop="back">
                    <i class="icon-back"></i>
                </div>
                <div class="switches-wrapper">
                    <Switches
                            :switches="switches"
                            :currentIndex="currentIndex"
                            @changeSwitch="changeSwitch"
                    >
                    </Switches>
                </div>
            </div>
            <div class="random-play-btn">
                <div class="play-group" @click='randomItem'>
                    <span class='text'><i class='icon-play'></i>随机播放全部</span>
                </div>
            </div>
            <div class="list-wrapper" ref="listWrapper">
                <Scroll ref="list" :datalength="list.length" v-if="list.length">
                    <SongList :songs="list" @selectItem="selectItem"></SongList>
                </Scroll>
                <NoResult title="空空如也~" class="user-center-no-result" v-else></NoResult>
            </div>
        </div>
    </transition>
</template>
<script>
    import { mapGetters, mapActions } from 'vuex';
    import { Song } from '@/common/js/song';
    import { playlistMixin } from '@/common/js/mixin';
    import Scroll from '@/base/scroll';
    import SongList from '@/base/song-list';
    import Switches from '@/base/switches';
    import NoResult from '@/base/no-result';

    const PLAYER_HEIGHT = 60;
    export default {
        mixins: [playlistMixin],
        name: 'user-center',
        data() {
            return {
                switches: [
                    {
                        label: '我喜欢的',
                    },
                    {
                        label: '最近听的',
                    },
                ],
                currentIndex: 0,
            };
        },
        computed: {
            list() {
                return this.currentIndex === 0 ? this.loveList : this.playHistory;
            },
            ...mapGetters(['loveList', 'playHistory']),
        },
        methods: {
            handlePlayList(list) {
                const scrollWrapper = this.$refs.listWrapper;
                if (list.length > 0) {
                    scrollWrapper.style.bottom = `${PLAYER_HEIGHT}px`;
                } else {
                    scrollWrapper.style.bottom = 0;
                }
                this.$refs.list && this.$refs.list.refresh();
            },
            back() {
                this.$router.push('/recommend');
            },
            changeSwitch(index) {
                this.currentIndex = index;
            },
            randomItem() {
                let list = [];
                if (this.currentIndex === 0) {
                    list = this.loveList;
                }
                if (this.currentIndex === 1) {
                    list = this.playHistory;
                }
                if (list.length === 0) {
                    return;
                }
                list = list.map(item => new Song(item));
                this.randomPlay({ list });
            },
            selectItem({ song }) {
                // ls本地存储不能保存方法！！！
                // this.$refs.tooltip.show();
                this.insertSong(new Song(song));
            },
            ...mapActions(['randomPlay', 'insertSong']),
        },
        components: {
            Switches,
            SongList,
            Scroll,
            NoResult,
        },
    };
</script>
<style lang="stylus" scoped>
    @import '~styl/var';
    @import '~styl/mixin';

    .user-center
        &.fade-enter-active, &.fade-leave-active
            transition transform  0.4s
        &.fade-enter, &.fade-leave-to
            transform translate3d(100%, 0, 0)
        wrapper(fixed,$higher)
        background #222
        .header
            position relative
            height 50px
            .back
                position: absolute
                top 0
                left: 6px
                .icon-back
                    display block
                    padding 10px
                    font-size 22px
                    color $color-theme
            .switches-wrapper
                width 240px
                margin 0 auto
                padding-top 8px
        .random-play-btn
            margin-top 30px
            text-align center
            .play-group
                display inline-block
                border 1px solid $color-theme
                color $color-theme
                border-radius 100px
                font-size 0
                box-sizing border-box
                width 135px
                padding 7px 0
                .text
                    display inline-block
                    font-size $font-size-small
                    i
                        display inline-block
                        vertical-align text-bottom
                        margin-right 6px
                        font-size $font-size-medium-x
        .list-wrapper
            position absolute
            top 115px
            bottom 0
            width 100%
            overflow hidden
            .user-center-no-result
                center(absolute)
</style>
